<template>
	<view class="content">

		<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
			@up="upCallback">
			<view class="goods" :style="'background: url('+ z_imgPath + 'goods_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
				<view class="goods_l">
					<!-- <image src="../../static/tabbar/mine_sel.png"></image> -->
					<text>龙珠手办店</text>
				</view>
				<view class="goods_r">
					<!-- <image src="../../static/tabbar/mine_sel.png"></image> -->
				</view>
			</view>

			<image :src="z_imgPath+'xian.png'" class="line"></image>


			<view class="qbt_con">
				<view v-for="(item,index) in listdata" :key="index" class="qbt_con_item" @click="todetails(item)"
					:style="'background: url('+ z_imgPath + 'kuang_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">

					<view class="list_1">
						<image :src="item.imgurl"></image>
					</view>
					<view class="list_2">
						<view class="hang1">{{item.title}}</view>
						<view class="qbt_con_item_price ">
							<cmd-progress :percent="55" :show-info="false"
								stroke-color="linear-gradient(90deg, #968EB9 1%, #FFFFFF 100%);" :strokeWidth="8"
								:is_num="true" :num_1="item.sale_stock" :num_2="item.stock">
							</cmd-progress>
						</view>
						<view class="qbt_con_item_3 ">
							<view>￥ <text style="font-size: 32rpx;">{{item.price}}</text></view>
						</view>
					</view>

				</view>
			</view>
		</mescroll-body>
		<!-- 群聊弹窗 -->
		<uni-popup ref="qunliao_show" type="center">
			<view class="pop" :style="'background: url('+ z_imgPath + 'qunliao_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">

				<image :src="erweima"></image>
				<image :src="z_imgPath + 'close.png'" class="qunliao_close" @click="$refs.qunliao_show.close()">
				</image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	export default {
		components: {
			lffBarrage
		},
		data() {
			return {
				z_imgPath: this.$z_img + 'shouye/',
				arr: ['新品推荐', '一番赏', '积分赏', '无限赏', '擂台赏'],
				show: '新品推荐',
				keyword: '',
				listdata: [],
				downOption: {
					auto: false
				},
				erweima: '', // 福利群
			}
		},



		onShareAppMessage() {
			let that = this;
			return {
				title: "快来加入乐掏~",
				imageUrl: that.advert[0].imgurl,
				path: "/pages/shouye/index?pid=" + uni.getStorageSync('userinfo').ID + '&from=' + uni.getStorageSync(
					'userinfo').from
			};
		},

		onLoad(v) {
			if (v.pid) {
				uni.setStorageSync('pid', v.pid)
			}
		},
		methods: {

			/*下拉刷新的回调 */
			downCallback() {
				// this.mescroll.resetUpScroll()
				this.loadData(1)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				this.loadData(page.num);
			},
			loadData(pageNo) {
				// 模拟接口
				let that = this;
				that.req({
					url: 'goods',
					data: {
						page: pageNo,
						type: that.show,
						keyword: that.keyword,
					},
					success: function(res) {
						that.mescroll.endByPage(res.data.data.length, res.data.data.last_page);
						if (pageNo == 1) {
							that.listdata = res.data.data;
						} else {
							that.listdata = that.listdata.concat(res.data.data);
						}
						console.log(that.listdata)
					}
				})
			},
			todetails(e) {
				// 无限赏
				if (e.type == 2) {
					uni.navigateTo({
						url: 'detail_wuxian?goods_id=' + e.id
					})
				} else {
					uni.navigateTo({
						url: 'detail?goods_id=' + e.id
					})
				}

			},
			getlist(v) {
				this.show = v;
				// this.listdata = []
				// this.mescroll.resetUpScroll()
				this.loadData(1)
			},
		}
	}
</script>

<style>
	.qunliao_close {
		width: 70rpx;
		height: 70rpx;
		margin: 116rpx auto;
		display: block;
		/* position: absolute; */
	}

	.pop>image:nth-of-type(1) {
		width: 399rpx;
		height: 399rpx;
		margin: 258rpx auto 0;
		display: block;
	}

	.pop {
		width: 640rpx;
		height: 743rpx;
		padding-top: 1rpx;
		position: relative;
	}

	.line {
		width: 750rpx;
		height: 20rpx;
		display: block;
	}

	.goods_r>image {
		width: 100rpx;
		height: 100rpx;
	}

	.goods_r {
		width: 122rpx;
		height: 122rpx;
		border: 2rpx solid #FF6500;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.goods_l>image {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}

	.goods_l {
		display: flex;
		align-items: center;
		color: #FFFFFF;
	}

	.goods {
		width: 750rpx;
		height: 220rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content {
		background: #09081C;
		width: 100vw;
		/* height: 100vh; */
		box-sizing: border-box;
		position: relative;
		background-attachment: fixed;
		position: relative;
	}

	.qbt_con {
		margin: 0rpx auto;
		width: 702rpx;
		padding-bottom: 100rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24rpx;
	}

	.qbt_con_item {
		margin-top: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		width: 335rpx;
		height: 490rpx;
		position: relative;
		padding: 18rpx 17rpx 0;
		box-sizing: border-box;
	}

	.list_1 {
		width: 300rpx;
		height: 300rpx;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.list_1>image {
		width: 300rpx;
		height: 300rpx;
		border-radius: 10rpx 10rpx 0 0;
		margin-top: 5rpx;
	}

	.list_2 {
		padding: 20rpx 0;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		color: #FFFFFF;
	}


	.qbt_con_item_3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 4rpx;
		color: #FF6500;
		margin: 10rpx auto 0;
	}

	.qbt_con_item_price {
		color: #FFFFFF;
		width: 280rpx;
		display: flex;
		align-items: center;
		margin: 16rpx auto 0;
	}
</style>